<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="searchFrom.name" placeholder="用户名称" style="width: 120px" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchFrom.status" placeholder="用户状态" style="width: 120px" size="small" clearable>
                        <el-option value="0" label="在职"></el-option>
                        <el-option value="1" label="离职"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchFrom.subject" placeholder="飞书主体" style="width: 120px" size="small">
                        <el-option v-for="(label, subject) in subjects" :key="subject" :value="subject" :label="label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchBtn" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" v-loading="loading" :max-height="tableHeight" size="mini">
                <el-table-column prop="name" label="用户名" width="100"></el-table-column>
                <el-table-column prop="mobile" label="手机号码" width="110">
                    <template slot-scope="scope">
                        {{scope.row.mobile | substr}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="用户状态" width="100">
                    <template slot-scope="scope">
                        <span style="color: #909399" v-if="scope.row.status && scope.row.status.is_resigned">已离职</span>
                        <span style="color: #67C23A" v-else>在职</span>
                    </template>
                </el-table-column>
                <el-table-column prop="join_time" label="加入时间" width="150"></el-table-column>
                <el-table-column prop="user_id" label="user_id" width="100"></el-table-column>
                <el-table-column prop="open_id" label="open_id">
                    <template slot-scope="scope">
                        <span class="ellipsis">{{scope.row.open_id}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="union_id" label="union_id">
                    <template slot-scope="scope">
                        <span class="ellipsis">{{scope.row.union_id}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="120">
                    <template slot-scope="scope">
                        <!--未同步到用户表 且 在职员工-->
                        <el-button v-if="!scope.row.status.is_resigned" type="text" @click="sync(scope.$index, scope.row)"
                                   :loading="selectIndex==scope.$index && syncLoading">同步</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>
    </section>
</template>
<script>
import {userFsList, userSync} from "@/api/user";

export default {
    name: 'feishu_user',
    props: {
        user: {
            type: Object,
            default: {}
        },
        subjects: {
            type: Object,
            default: {}
        },
    },
    filters: {
        substr(value){
            return value.replace("+86", "");
        }
    },
    data() {
        return {
            isLoad: false,//子组件是否已加载过
            searchFrom: {
                name: '',
                status: '',
                subject: 'kz'
            },

            selectIndex: 0,
            loading: false,
            data: [],
            page: 1,
            limit: 20,
            total: 0,
            tableHeight: window.innerHeight-284,

            syncLoading: false,
        }
    },
    methods: {
        searchBtn(){
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page){
            this.page = page;
            this.getData();
        },
        //获取数据
        getData(){
            let param = {
                page: this.page,
                limit: this.limit,
                name: this.searchFrom.name,
                status: this.searchFrom.status,
                subject: this.searchFrom.subject
            };
            this.loading = true;
            userFsList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(()=>{
                this.loading = false;
            });
        },
        //同步
        sync(index, row){
            this.$confirm('信息将被同步到【用户列表】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.selectIndex = index;
                this.syncLoading = true;
                let obj = {id: row.id, subject: this.searchFrom.subject}
                userSync(obj).then((res) => {
                    this.syncLoading = false;
                    if(res.code === 0){
                        this.$message.success("同步成功");
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(()=>{
                    this.syncLoading = false;
                });
            }).catch(() => {
                this.$message.info("操作已取消");
            });
        }
    },
    mounted(){

    },
}
</script>
<style scoped>
    .ellipsis {
        overflow: hidden; /* 确保超出容器的内容被裁剪 */
        white-space: nowrap; /* 确保文本在一行内显示 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
    }
</style>
